<template>
  <div class="register-box">
    <p class="title">新用户注册</p>
    <el-form ref="registerForm" :model="registerForm" :rules="rules">
      <!-- 手机号 -->
      <el-form-item prop="mobile">
        <el-input-group>
          <el-select v-model="areaCode" placeholder="请选择" class="area-code-select">
            <el-option label="+86" value="1" />
          </el-select>
          <el-input v-model="registerForm.mobile" placeholder="请输入手机号" />
        </el-input-group>
        <span class="tip">手机号将用于登录</span>
      </el-form-item>

      <!-- 图形验证码 -->
      <el-form-item prop="imageCode">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input
              v-model="registerForm.imageCode"
              placeholder="请输入图形验证码"
            />
          </el-col>
          <el-col :span="8">
            <div class="code-img" @click="refreshCode">
              <img :src="codeSrc" alt="验证码" />
            </div>
          </el-col>
        </el-row>
      </el-form-item>

      <!-- 短信验证码 -->
      <el-form-item prop="smsCode">
        <el-input v-model="registerForm.smsCode" placeholder="请输入短信验证码">
          <template #append>
            <el-button @click="sendCode" :disabled="sending">
              {{ sendBtnText }}
            </el-button>
          </template>
        </el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input
          v-model="registerForm.password"
          type="password"
          placeholder="请设置密码"
          show-password
        />
      </el-form-item>

      <!-- 确认密码 -->
      <el-form-item prop="passwordConfirm">
        <el-input
          v-model="registerForm.passwordConfirm"
          type="password"
          placeholder="请确认密码"
        />
      </el-form-item>

      <!-- 昵称 -->
      <el-form-item prop="nickName">
        <el-input
          v-model="registerForm.nickName"
          placeholder="请输入昵称"
        />
      </el-form-item>

      <!-- 用户协议 -->
      <el-form-item>
        <el-checkbox v-model="registerForm.agreement">
          我已阅读并同意
          <span class="link" @click="openAgreement">《用户注册协议》</span>
        </el-checkbox>
      </el-form-item>

      <!-- 注册按钮 -->
      <el-form-item>
        <el-button type="primary" class="register-btn" @click="handleRegister">
          注册
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 登录入口 -->
    <div class="login-entry">
      <p>
        已有账号?
        <span @click="$emit('switchType', 'login')">立即登录</span>
      </p>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import { randomLenNum } from '@/utils'
import { sendSmsCode } from '@/api/auth'

export default defineComponent({
  name: 'RegisterBox',
  
  emits: ['switchType'],

  setup(props, { emit }) {
    const registerForm = reactive({
      mobile: '',
      imageCode: '',
      smsCode: '',
      password: '',
      passwordConfirm: '',
      nickName: '',
      agreement: false
    })

    const rules = {
      mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
      ],
      imageCode: [
        { required: true, message: '请输入图形验证码', trigger: 'blur' }
      ],
      smsCode: [
        { required: true, message: '请输入短信验证码', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码不能少于6位', trigger: 'blur' }
      ],
      passwordConfirm: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        { validator: (rule, value, callback) => {
            if (value !== registerForm.password) {
              callback(new Error('两次输入的密码不一致'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
      ],
      nickName: [
        { required: true, message: '请输入昵称', trigger: 'blur' }
      ]
    }

    const areaCode = ref('1')
    const codeSrc = ref('')
    const sending = ref(false)
    const sendBtnText = ref('发送验证码')
    let timer = null

    // 刷新验证码
    const refreshCode = () => {
      registerForm.imageCode = ''
      const randomStr = randomLenNum(4, true)
      codeSrc.value = `/api/code?randomStr=${randomStr}`
    }

    // 发送短信验证码
    const sendCode = async () => {
      if (!registerForm.mobile) {
        ElMessage.warning('请先输入手机号')
        return
      }
      if (!registerForm.imageCode) {
        ElMessage.warning('请先输入图形验证码')
        return
      }

      try {
        sending.value = true
        await sendSmsCode({
          mobile: registerForm.mobile,
          imageCode: registerForm.imageCode,
          type: 'register'
        })
        
        let count = 60
        sendBtnText.value = `${count}s`
        
        timer = setInterval(() => {
          count--
          if (count <= 0) {
            clearInterval(timer)
            sending.value = false
            sendBtnText.value = '发送验证码'
          } else {
            sendBtnText.value = `${count}s`
          }
        }, 1000)
      } catch (error) {
        sending.value = false
        refreshCode()
      }
    }

    // 处理注册
    const handleRegister = () => {
      if (!registerForm.agreement) {
        ElMessage.warning('请先阅读并同意用户注册协议')
        return
      }
      
      emit('handleRegister', registerForm)
    }

    // 打开用户协议
    const openAgreement = () => {
      window.open('/agreement.html')
    }

    return {
      registerForm,
      rules,
      areaCode,
      codeSrc,
      sending,
      sendBtnText,
      refreshCode,
      sendCode,
      handleRegister,
      openAgreement
    }
  }
})
</script>

<style lang="scss" scoped>
.register-box {
  position: relative;
  padding: $spacing-large; /* 使用项目的间距变量 */
  border-radius: $border-radius-large; /* 使用项目的圆角变量 */
  background: $background-color-white; /* 使用项目的白色背景变量 */
  box-shadow: $box-shadow-base; /* 使用项目的阴影变量 */

  .title {
    font-size: $font-size-large; /* 使用项目的大字体大小变量 */
    color: $text-primary; /* 使用项目的主要文字颜色变量 */
    text-align: center;
    margin-bottom: $spacing-base; /* 使用项目的间距变量 */
  }

  .tip {
    font-size: $font-size-small; /* 使用项目的小字体大小变量 */
    color: $text-secondary; /* 使用项目的次要文字颜色变量 */
    margin-top: $spacing-mini; /* 使用项目的小间距变量 */
  }

  .code-img {
    height: 40px;
    cursor: pointer;
    
    img {
      width: 100%;
      height: 100%;
    }
  }

  .register-btn {
    width: 100%;
    height: 40px;
    background: $primary-color; /* 使用项目的主色变量 */
    border-color: $primary-color; /* 使用项目的主色变量 */
    font-size: $font-size-base; /* 使用项目的字体大小变量 */
  }

  .link {
    color: $primary-color; /* 使用项目的主色变量 */
    cursor: pointer;
  }

  .login-entry {
    text-align: center;
    margin-top: $spacing-base; /* 使用项目的间距变量 */
    padding-top: $spacing-base; /* 使用项目的间距变量 */
    border-top: 1px solid $border-color-light; /* 使用项目的边框颜色变量 */

    p {
      color: $text-regular; /* 使用项目的常规文字颜色变量 */
      font-size: $font-size-small; /* 使用项目的小字体大小变量 */

      span {
        color: $primary-color; /* 使用项目的主色变量 */
        cursor: pointer;
      }
    }
  }
}
</style> 